<template>
	<view class="comment">
		<view class="wrapper">
			<view class="top d-flex">
				<u-image width="190rpx" height="190rpx" radius="12rpx"></u-image>
				<view style="margin-left: 30rpx;">
					<view class="name">{{ data.name }}</view>
					<view class="date">{{ data.date }}</view>
					<price :value="data.price"></price>
				</view>
			</view>
			
			<u-line dashed margin="40rpx 0"></u-line>
			
			<view class="flex-align">
				<view style="margin-right: 20rpx;">评分</view>
				<u-rate :count="5" v-model="formData.rate" activeColor="#FFBA00" size="26"></u-rate>
			</view>
			
			<u-textarea v-model="formData.content" placeholder="写满10字评论并上传图片，有机会被更多人看到哦~" border="none" height="130"></u-textarea>
			
			<u-upload
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				name="file"
				multiple
				:maxCount="10"
				previewFullImage
			/>
			
			<view class="flex-between" style="margin-top: 60rpx;">
				<view>匿名评价</view>
				<u-switch v-model="formData.faceless" size="28" activeColor="#2f75fa"></u-switch>
			</view>
		</view>
		
		<view class="bottom-add-btn">
			<u-button text="提交" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				name: '篮球20次卡',
				date: '7月28日-7月30日',
				price: 30
			},
			formData: {
				rate: 0,
				content: ''
			},
			fileList: []
		}
	},
	methods: {
		deletePic(event) {
			this.fileList.splice(event.index, 1);
		},
		async afterRead(event) {
			console.log(event.file)
			this.fileList.concat(event.file);
		},
		async add() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.comment {
	min-height: 100vh;
	background-color: #F6F6F6;
	padding: 30rpx;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	.wrapper {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.top {
		.name {
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.date {
			margin-bottom: 30rpx;
			background-color: #f3f3f3;
			color: rgb(136,136,136);
			font-size: 24rpx;
			border-radius: 100px;
			padding: 4rpx 20rpx;
		}
	}
	
	/deep/.u-textarea {
		background-color: #f3f3f3;
		margin: 40rpx 0;
	}
}
</style>
